<template>
    <fui-waterfall leftGap="20" rightGap="20" columnGap="10" topGap="10" ref="waterfallREF">
        <fui-waterfall-item
            v-for="(item, index) in data"
            :key="index"
            :src="item.frameUrl || item.url + '?x-oss-process=video/snapshot,t_100,w_375'"
            @click.stop="toVideoDetail(item)"
        >
            <view class="content">
                <fui-overflow-hidden
                    :text="item.desc"
                    size="26"
                    color="#3D3D3D"
                    :rows="2"
                ></fui-overflow-hidden>
            </view>

            <view class="flex-between">
                <view
                    class="flex-1-0-0 flex-row-center gap-[10rpx] avatar-box"
                    @click.stop="
                        $jump(
                            '/views/subViews/userHomePage/index/index?' +
                                (item.type === 1 ? 'uid' : 'factoryId') +
                                '=' +
                                item.bindId
                        )
                    "
                >
                    <image :src="item.avatar" mode="aspectFill" />
                    <view>
                        {{ item.nickname }}
                    </view>
                </view>

                <view class="playCount"> {{ item.playCount }} 播放</view>
            </view>
        </fui-waterfall-item>
    </fui-waterfall>
</template>
<script lang="ts" setup>
const props = defineProps(['data'])
const waterfallREF = ref()

const toVideoDetail = (row: any) => {
    uni.setStorageSync('videoList', [row])
    uni.navigateTo({
        url: `/views/subViews/videoPage/videoDetail/index?bindId=` + row.bindId
    })
}

defineExpose({
    waterfallREF
})
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx 0;
}
.fui-waterfall__item-wrap {
    ::v-deep .fui-waterfall__img {
        border-radius: 10px !important;
    }
}

.avatar-box {
    color: #999999;
    font-size: 10px;
    image {
        width: 50rpx;
        height: 50rpx;
        border-radius: 999rpx;
    }
}
.playCount {
    color: #999999;
    font-size: 10px;
}
</style>
